<template>
    <div class="Zky_Popup" @dblclick.self="DBclickActive" v-if="PopupFlag">
        <div class="Zky_PopupFlex">
            <div class="Zky_PopupBox">
                <div class="Zky_PopupBoxHeader FontSize_Title" v-if="prop.titleHidden">
                    {{ title }}
                </div>
                <div class="Zky_PopupBoxContent">
                    <div class="Zky_PopupBoxContentBox">
                        <div class="Zky_PopupBoxContentBoxOver" :class="prop.overflowhidden ? 'hidden' : ''">
                            <slot class="FontSize_word">欢迎使用本弹窗</slot>
                        </div>
                    </div>
                </div>
                <div class="Zky_PopupBoxFooter" v-if="FoorthHidden">
                    <button @click="Confirm" class="FontSize_word" v-if="prop.ConfirmlHidden">{{ ConfirmTitle }}</button>
                    <button data-error @click="Cancel" class="FontSize_word" v-if='CancelHidden'> 取消</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
const prop = defineProps({
    hidden: {
        //控制弹窗显示
        type: Boolean,
    },
    title: {
        //头部文本
        type: String,
    },
    Confirm: {
        //确认按钮点击事件
        type: Function,
    },
    Cancel: {
        type: Function,
        //取消按钮点击事件
    },
    titleHidden: { //控制头部是否显示
        default: true,
        type: Boolean,
    },
    FoorthHidden: { //控制底部是否显示
        default: true,
        type: Boolean,
    },
    CancelHidden: { //控制取消按钮是否显示是否显示
        default: true,
        type: Boolean,
    },
    ConfirmlHidden: { //控制确认按钮是否显示是否显示
        default: true,
        type: Boolean,
    },
    ConfirmTitle: { //自定义显示按钮文本
        default: "确定",
        type: String,
    },
    overflowhidden: { //控制中心文本下拉框是否显示
        default: false,
        type: Boolean,
    },


})
const emit = defineEmits(["update:hidden"])
const title = ref("弹窗样式")
const PopupFlag = ref(false)

watch([() => prop.hidden, () => prop.title], () => {
    init()
})

const DBclickActive = () => {
    // PopupFlag.value = !PopupFlag.value
    // emit("update:hidden", PopupFlag.value)
}

// 确认按钮
const Confirm = () => {

    if (prop.Confirm) {
        prop.Confirm()
    } else {
        PopupFlag.value = !PopupFlag.value
        // defineModel 
        emit("update:hidden", PopupFlag.value)
    }

}

// 取消按钮
const Cancel = () => {
    if (prop.Cancel) {
        prop.Cancel()
    } else {
        PopupFlag.value = !PopupFlag.value
        // defineModel 
        emit("update:hidden", PopupFlag.value)
    }
}

const init = () => {
    PopupFlag.value = prop.hidden
    // if (prop.hidden) {

    // }
    if (prop.title) {
        title.value = prop.title
    }
}
init()
</script>

<style scoped lang="scss">
.Zky_Popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
    padding: 10px;
    box-sizing: border-box;

    .Zky_PopupBox {
        width: 80%;

        /*height: 80vh;*/
        background: #696868;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;

        .Zky_PopupBoxHeader {
            border-bottom: 1px solid #aaa;
            text-align: center;
            height: auto;
        }

        .Zky_PopupBoxContent {
            padding: 10px;
            height: 50vh;

            .Zky_PopupBoxContentBox {
                width: 100%;
                height: 100%;
                overflow: hidden;

                .Zky_PopupBoxContentBoxOver {
                    overflow-y: auto;
                    height: 100%;
                }

                /*
                .hidden {
                    width: calc(100% + 18px);

                }*/
            }

        }

        .Zky_PopupBoxFooter {
            border-top: 1px solid #aaa;
            position: relative;
            width: 100%;
            bottom: 0;

            display: flex;
            justify-content: center;
            box-sizing: border-box;

            button {}
        }
    }
}
</style>